<template>
  <!-- 黄石大冶待指派欠薪诉求 -->
  <div ref="mainCon" class="container">
    <div class="mainCon">
      <el-row class="toolbar searchInputWidth" style="padding-bottom: 0">
        <el-form :inline="true" :model="filterField" ref="searchConditions">
          <el-col :lg="8" :xl="6">
            <el-form-item label="区域" class="row-padding-bottom">
              <el-cascader
                ref="manageArea"
                v-model="filterField.areaId"
                :options="areasOptions"
                clearable
                filterable
                :props="{ checkStrictly: true, emitPath: false }"
              ></el-cascader>
            </el-form-item>
          </el-col>
          <el-col :lg="8" :xl="6">
            <el-form-item label="反映人姓名" class="row-padding-bottom">
              <el-input
                v-model="filterField.name"
                placeholder="请输入"
                clearable
              ></el-input>
            </el-form-item>
          </el-col>
          <template v-if="advanced">
            <el-col :lg="8" :xl="6">
              <el-form-item label="反映人电话" class="row-padding-bottom">
                <el-input
                  v-model="filterField.perTel"
                  placeholder="请输入"
                  clearable
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xl="6">
              <el-form-item label="行业领域" class="row-padding-bottom">
                <el-select
                  v-model="filterField.fieldType"
                  filterable
                  placeholder="请选择"
                  clearable
                >
                  <el-option
                    v-for="item in fieldTypeOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xl="6">
              <el-form-item label="编号" class="row-padding-bottom">
                <el-input
                  v-model="filterField.backPayNumber"
                  placeholder="请输入"
                  clearable
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xl="6">
              <el-form-item label="类型" class="row-padding-bottom">
                <el-select
                  v-model="filterField.type"
                  filterable
                  placeholder="请选择"
                  clearable
                  :popper-append-to-body="false"
                >
                  <el-option
                    label="所在地区驳回"
                    value="AREA_REJECT"
                  ></el-option>
                  <el-option label="未分派" value="NO_ASSIGN"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </template>
          <el-form-item>
            <a
              @click="toggleAdvanced"
              style="margin-left: 40px; color: #409eff; cursor: pointer"
              class="btnColor"
            >
              {{ advanced ? '收起' : '展开' }}
              <i
                :class="advanced ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
              ></i>
            </a>
            <el-button
              type="primary"
              icon="icon iconfont iconchazhao1"
              @click="searchList"
              class="searchBtn"
            >
              <span>搜索</span>
            </el-button>
          </el-form-item>
        </el-form>
      </el-row>

      <!-- <div class="lineBar"></div>
        <div class="mainConBottom"> -->
      <div class="spacing"></div>
      <div
        ref="tableBox"
        :class="hiddleToolBar ? 'tableBoxCur tableBox' : 'tableBoxCur'"
      >
        <div>
          <!-- 查询表格 -->
          <!-- <exportBtn responseType="get" :dataLen="tableList.length" :filterField="filterField" api="api-r/rightbackpay/expand/export"></exportBtn> -->
          <!-- <el-button type="primary" class="commonBut saveBtn" v-sdc @click="openPersonDialog">指定责任人</el-button>
                <el-button type="primary" class="commonBut saveBtn" v-sdc @click="openTaskDialog">地区任务分发</el-button> -->
        </div>
        <el-table
          ref="tableBox1"
          :max-height="tableHeight"
          :data="tableList"
          v-loading="loading"
          :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
          highlight-current-row
          stripe
          @selection-change="handleSelectionChange"
          style="border: 1px solid #dfe6ec"
        >
          <!-- <el-table-column type="selection" width="55"></el-table-column> -->
          <el-table-column
            prop="backPayNumber"
            label="编号"
            :formatter="formatTd"
            width="180"
          ></el-table-column>
          <el-table-column label="办理时限" min-width="100" align="center">
            <template slot-scope="scope">
              <span v-if="!calcColor(scope.row)">--</span>
              <span
                v-else
                :class="
                  calcColor(scope.row) != 'GREEN'
                    ? calcColor(scope.row) === 'YELLOW'
                      ? 'dot yellow'
                      : 'dot red'
                    : 'dot green'
                "
              ></span>
            </template>
          </el-table-column>
          <el-table-column
            prop="fieldTypeDesc"
            label="行业领域"
            :formatter="formatTd"
            width="180"
          ></el-table-column>
          <el-table-column
            prop="complaintRemark"
            label="欠薪基本情况摘要"
            :formatter="formatTd"
            width="230"
          >
            <template slot-scope="scope">
              <copyText
                :tableIndex="scope.$index"
                :copyTextName="scope.row.complaintRemark"
                :columnName="'complaintRemark'"
              ></copyText>
            </template>
          </el-table-column>
          <el-table-column
            prop="name"
            label="反映人姓名"
            :formatter="formatTd"
            width="150"
          ></el-table-column>
          <el-table-column
            prop="perTel"
            label="反映人电话"
            :formatter="formatTd"
            width="150"
          >
          </el-table-column>
          <el-table-column
            prop="proposalAreaName"
            label="类型"
            :formatter="formatTd"
            width="150"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.type == 'AREA_REJECT'">所在地区驳回</span>
              <span v-else>未分派</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="proposalAreaName"
            label="建议所在地区"
            :formatter="formatTd"
            width="180"
          ></el-table-column>
          <el-table-column
            prop="countyName"
            label="所在县市区"
            :formatter="formatTd"
            width="180"
          ></el-table-column>
          <el-table-column
            prop="streetName"
            label="分发乡镇/街道"
            :formatter="formatTd"
            width="180"
          >
          </el-table-column>
          <el-table-column
            prop="complaintManagerName"
            label="分派责任人"
            :formatter="formatTd"
            width="180"
          ></el-table-column>
          <el-table-column
            label="操作"
            align="left"
            :formatter="formatTd"
            width="230"
            fixed="right"
          >
            <template slot-scope="scope">
              <el-link type="primary" @click="epenSingleTask(scope.row)"
                >地区任务分发</el-link
              >
              <el-link type="primary" @click="openSinglePerson(scope.row)"
                >指定责任人</el-link
              >
            </template>
          </el-table-column>
        </el-table>
        <Pagination
          ref="pagination"
          @getList="getTableList"
          :filterField="filterField"
          :requestUrl="requestUrl"
        ></Pagination>
      </div>
      <!-- 地区任务分发弹窗 -->
      <dialog-area
        :showTaskProp="showTask"
        @callback="handleCloseArea"
        :childData="caseInfo"
        :ids="ids"
      />
      <!-- 指定责任人弹窗 -->
      <dialog-person
        :showTaskProp="showPerson"
        @callback="handleClosePerson"
        :childData="caseInfo"
        :ids="ids"
      />
    </div>
  </div>
</template>
<script>
import { mapActions, mapState } from 'vuex'
import dialogArea from './dialogArea.vue'
import DialogPerson from './dialogPerson.vue'
import scrollTable from '@/mixin/scrollTable.js'

export default {
  components: { dialogArea, DialogPerson },
  name: 'ToAssignCaseHS',
  mixins: [scrollTable],
  props: ['activeName'],
  data() {
    return {
      titleText: '待指派欠薪诉求',
      filterField: {
        isNoAssign: 1,
        areaId: '', //区域
        name: '', //反映人姓名
        perTel: '', //反映人电话
        fieldType: '', //行业领域
        backPayNumber: '', //编号
        type: '', //类型
        sourceArea: '', //部署区域id
        dataSource: '',
      },
      fieldTypeOptions: [
        {
          label: '建设领域',
          value: 'CS',
        },
        {
          label: '非建领域',
          value: 'NC',
        },
      ],
      // applyDate: [],
      tableList: [],
      requestUrl: 'api-r/rightbackpay/expand/listforweb',
      showTask: false,
      taskAreaId: '',
      taskAreaIds: '',
      showPerson: false,
      activedList: [],
      caseInfo: {},
      ids: [],
      advanced: false,
    }
  },
  computed: { ...mapState(['areasOptions']) },
  watch: {
    // 黄石标题tab
    activeName(newValue, oldValue) {
      ;(this.filterField = {
        isNoAssign: 1,
        areaId: '', //区域
        name: '', //反映人姓名
        perTel: '', //反映人电话
        fieldType: '', //行业领域
        backPayNumber: '', //编号
        type: '', //类型
        sortField: '',
        sort: '',
      }),
        (this.filterField.sourceArea = this.$store.state.currentAreaId)
      this.filterField.dataSource = newValue
      this.$nextTick(function () {
        this.$refs.pagination.getTableListData()
      })
    },
  },
  created() {
    this.filterField.sourceArea = this.$store.state.currentAreaId
    this.filterField.dataSource = this.activeName

    this.$nextTick(function () {
      this.$refs.pagination.getTableListData()
    })
    this.getAreas({ areaId: this.$store.state.areaInfoArr.areaId })
  },
  methods: {
    ...mapActions(['getAreas']),
    toggleAdvanced() {
      this.advanced = !this.advanced
    },
    getAreaId() {
      var areaId = this.areaId[this.areaId.length - 1]
      this.filterField.sendAreaId = areaId
    },
    getTableList(data) {
      this.tableList = data
      this.loading = false
      if (this.tableList.length < 1) {
        this.isShow = true
      }
    },
    // 搜索
    searchList() {
      this.$refs.pagination.getTableListData()
    },
    /**
     * @name: 地区任务分发相关
     * @param {*}
     * @Author: 471826078@qq.com
     */
    openTaskDialog() {
      if (this.activedList.length) {
        this.caseInfo = {}
        let arr = []
        this.activedList.forEach((item) => {
          arr.push(item.id)
        })
        this.ids = arr
        this.showTask = true
      } else {
        this.$message({
          type: 'warning',
          message: '请勾选需要指定的诉求',
        })
      }
    },
    epenSingleTask(item) {
      this.caseInfo = item
      this.ids = []
      this.showTask = true
    },
    handleCloseArea(val) {
      this.showTask = false
      if (val.success) {
        this.$refs.pagination.getTableListData()
      }
    },
    /**
     * @name:获取table选中行
     * @param {*}
     * @Author: 471826078@qq.com
     */
    handleSelectionChange(val) {
      this.activedList = val
    },
    /**
     * @name: 批量指定责任人相关方法
     * @param {*}
     * @Author: 471826078@qq.com
     */
    openPersonDialog() {
      if (this.activedList.length) {
        this.caseInfo = {}
        let arr = []
        this.activedList.forEach((item) => {
          arr.push(item.id)
        })
        this.ids = arr
        console.log(this.ids)
        this.showPerson = true
      } else {
        this.$message({
          type: 'warning',
          message: '请勾选需要指定的诉求',
        })
      }
    },
    /**
     * @name: 单个指定责任人相关方法
     */
    openSinglePerson(item) {
      this.caseInfo = item
      this.ids = []
      this.showPerson = true
    },
    handleClosePerson(val) {
      this.showPerson = false
      if (val.success) {
        this.$refs.pagination.getTableListData()
      }
    },
    calcColor(row) {
      let colorStr = ''
      if (!row.createTime) return
      let createTime = new Date(row.createTime + ' 00:00:00').getTime()
      let nowDate = new Date().toLocaleDateString()
      let now = new Date(nowDate).getTime()
      if (row.status === 'ACCEPTED' || row.status === 'REFUSED') {
        colorStr = 'GREEN'
      } else {
        if (this.isLzh) {
          if (now - createTime <= 15 * 24 * 60 * 60 * 1000) {
            colorStr = 'GREEN'
          }
          if (
            now - createTime > 15 * 24 * 60 * 60 * 1000 &&
            now - createTime <= 30 * 24 * 60 * 60 * 1000
          ) {
            colorStr = 'YELLOW'
          }
          if (now - createTime > 30 * 24 * 60 * 60 * 1000) {
            colorStr = 'RED'
          }
        } else {
          if (now - createTime <= 30 * 24 * 60 * 60 * 1000) {
            colorStr = 'GREEN'
          }
          if (
            now - createTime > 30 * 24 * 60 * 60 * 1000 &&
            now - createTime <= 60 * 24 * 60 * 60 * 1000
          ) {
            colorStr = 'YELLOW'
          }
          if (now - createTime > 60 * 24 * 60 * 60 * 1000) {
            colorStr = 'RED'
          }
        }
      }
      return colorStr
    },
    iconChange(val) {
      const dom = this.$refs['select_icon'].$el
      const dotDom = document.getElementsByClassName('appendSpan')[0]
      if (dotDom) {
        // 清除已有节点
        dom.children[0].removeChild(dotDom)
      }
      if (val) {
        this.isSelect = true
        // 选中插入节点
        const iconDom = document.createElement('span')
        iconDom.setAttribute(
          'class',
          val != 'GREEN'
            ? val === 'YELLOW'
              ? 'appendSpan appendYellow'
              : 'appendSpan appendRed'
            : 'appendSpan appendGreen'
        )
        dom.children[0].appendChild(iconDom)
      } else {
        this.isSelect = false
      }
    },
  },
}
</script>
<style lang="less" scoped>
@import '../../../static/css/filterArea.less';
.mainCon {
  top: 196px;
  padding: 24px 0;
  .lineBar {
    width: 100%;
    height: 10px;
    background-color: #f5f7fa;
  }
  .actions {
    height: 36px;
    line-height: 36px;
    font-size: 16px;
    color: #333333;
    margin-bottom: 24px;
    .el-button {
      margin-left: 12px;
    }
  }
  &Bottom {
    padding: 16px 24px 24px;

    .el-button {
      margin-left: 12px;
    }
  }
}

.dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
}
.green {
  background: rgb(4, 151, 138);
}
.yellow {
  background: rgb(246, 155, 34);
}
.red {
  background: rgb(218, 4, 29);
}
</style>
